<template>
    <div class="container" v-loading="loading">
        <div class="login-form">
            <img src="https://img.cyeyi.com/databoard/images/login-bg.png" class="login-bg">
            <img src="https://img.cyeyi.com/databoard/images/login-title.png" class="login-title">
            <el-input v-model="password" placeholder="请输入访问码" class="code-input" type="password" :show-password="true"></el-input>
            <img src="https://img.cyeyi.com/databoard/images/login-button.png" class="login-button" @click="login">
        </div>
    </div>
</template>
<script>
import { screeLogin } from "@/api/customer";
export default {
    data() {
        return {
            password: '',
            loading: false
        }
    },
    mounted() {
    },
    methods: {
        login() {
            if (this.password === '') {
                this.$message({
                    message: '请输入访问码',
                    type: 'error'
                });
                return;
            }
            this.loading = true;
            screeLogin({
                url: decodeURIComponent(location.href).replace('/?','?'),
                // url: 'http://www.hnorm.com?tid=MTA=',
                access_code: this.password
            }).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$message({
                        message: res.message || '输入错误，请确认后重新输入',
                        type: 'error'
                    });
                    return;
                } else {
                    this.$store.dispatch('user/setToken', this.password);
                    this.$store.dispatch('user/setLoginInfo', res.result);
                    this.$emit('loginSuccsee');
                }
            }).catch((e) => {
                console.error(e);
                this.loading = false;
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    background-image: url(../assets/images/big-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    // filter: blur(46px);
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .login-form {
        width: 33vw; //634,351,256,49
        height: 18.268vw;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        ::v-deep {
            .el-input__inner {
                background: transparent;
                border-radius: 13px 13px 13px 13px;
                opacity: 1;
                border: 1px solid;
                border-image: linear-gradient(208deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.19)) 1 1;
                color: #FFFFFF;
                height: 100%;
                font-size: 1.5vh;
            }
        }

        .login-bg {
            width: 100%;
            position: absolute;
        }

        .login-title {
            width: 19.87%;
            position: absolute;
            top: 35.61%;
            left: 50%;
            transform: translateX(-50%);
        }

        .code-input {
            position: absolute;
            top: 49%;
            width: 29%;
            height: 11.97%;
            left: 50%;
            transform: translateX(-50%);
        }

        .login-button {
            width: 40.38%;
            position: absolute;
            bottom: 13.96%;
            left: 50%;
            transform: translateX(-50%);
            cursor: pointer;
        }
    }
}
</style>